import React, { Component } from "react";
import { connect } from "react-redux";
import "./BankIndex.scss";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { Checkbox } from "antd-mobile";
import { agreements_url } from "@config/Config";

const AgreeItem = Checkbox.AgreeItem;

class BankIndex extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loadStatus: "1" // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
	}

	componentDidMount() {
		// this.getInitData();
	}

	render() {
		const headerParams = {
			header: {
				title: "余额",
				goToApp: true
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		return (
			<MainLayout pageParams={headerParams}>
				<div className="bank-index-page">
					<div className="content">
						<div className="top-content">
							<div className="line-1">
								余额 <span className="t-s">是什么？</span>
							</div>
							<div className="line-2">
								余额支付是开通华通银行电子账户，电子账户里的资金不仅可以在永辉买菜进行购物消费，而且可获得华通银行提供的专属金融服务。
							</div>
						</div>
						<img
							className="step-img"
							src={require("../../../../images/imageXHB/bg-y-e-step.png")}
						/>

						<div className="line-3">
							<div
								className={
									this.state.agreeFlag ? "btn-common" : "btn-common btn-gray"
								}
								onClick={this.gotoNext.bind(this)}
							>
								下一步
							</div>
							<div className="contract_content">
								<AgreeItem
									checked={this.state.agreeFlag}
									onChange={this.checkBoxClick.bind(this)}
								>
									阅读并同意签署
									<a onClick={this.openContract.bind(this, 1)}>
										《永辉金融隐私政策》
									</a>
									<a onClick={this.openContract.bind(this, 2)}>
										《永辉金融用户协议》
									</a>
								</AgreeItem>
							</div>
						</div>
					</div>
				</div>
			</MainLayout>
		);
	}

	gotoNext() {
		if (!this.state.agreeFlag) {
			return;
		}
		this.props.history.push({
			pathname: `/uploadIDCardImgPage`,
			params: {}
		});
	}
	//勾选协议
	checkBoxClick(e) {
		this.setState({
			agreeFlag: e.target.checked
		});
	}

	//查看协议
	openContract(v) {
		if (v === 1) {
			this.props.history.push({
				pathname: "/iframeAgreements",
				state: {
					src: agreements_url + "/privacyAgreement.html",
					title: "永辉金融隐私政策"
				}
			});
		} else if (v === 2) {
			this.props.history.push(`/serviceAgreementAuthorization`);
		}
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(BankIndex);
